<template>
	<view class="nav" :style="{'background-color': navBgColor}">
		<view class="nav-tab">
			<u-tabs 
				:list="list" 
				:bg-color="tabsBgColor" 
				:show-bar="showBar"
				:item-width="itemWidth"
				:gutter="0"
				inactive-color="#999999"
				active-color="#171717"
				:current="current"
				@change="handleChangeTab"></u-tabs>
		</view>
		<view class="nav-screen" @click="handleShowScreen">
			<u-image class="image"  width="40rpx" height="40rpx" src="/static/icons/screen_icon.png"></u-image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		navBgColor: {
			type: String,
			default: '#f5f5f5'
		},
		tabsBgColor: {
			type: String,
			default: '#f5f5f5'
		}
	},
	data() {
		return {
			current: 0,
			showBar: false,
			list: [
				{
					name: '最新公告'
				},
				{
					name: '种草'
				},
				{
					name: '测评'
				},
				{
					name: '探店'
				},
				{
					name: '带货'
				},
				{
					name: '带货'
				},
				{
					name: '带货'
				},
				{
					name: '带货'
				},
				{
					name: '带货'
				}
			]
		}
	},
	computed: {
		itemWidth() {
			let num = 0
			if(this.list.length <= 5) {
				num = 680 / this.list.length
			} else {
				num = 680 / 5
			}
			return num
		}
	},
	methods: {
		handleChangeTab(index) {
			this.current = index
			this.$emit('handleChangeTab')
		},
		handleShowScreen() {
			this.$emit('screen')
		}
	}
}
</script>

<style lang="scss" scoped>
.nav {
	display: flex;
	align-items: center;
	height: 120rpx;
	padding: 20rpx 10rpx 0;
	// background-color: #f5f5f5;
	&-tab {
		flex: 1;
		overflow: hidden;
	}
	&-screen {
		padding: 10rpx;
	}
}
</style>
